﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="http://jspang.com/xmlrpc.php">

<title>技术胖的Vue-cli 视频教程 &#8211; 技术胖-胜洪宇关注web前端技术</title>
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="技术胖-胜洪宇关注web前端技术 &raquo; Feed" href="http://jspang.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="技术胖-胜洪宇关注web前端技术 &raquo; 评论Feed" href="http://jspang.com/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="技术胖-胜洪宇关注web前端技术 &raquo; 技术胖的Vue-cli 视频教程评论Feed" href="http://jspang.com/2017/04/10/vue-cli/feed/" />
		<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/jspang.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.8.2"}};
			!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,56826,8203,55356,56819),0,0),c=j.toDataURL(),b!==c&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55358,56794,8205,9794,65039),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55358,56794,8203,9794,65039),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
		<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
<link rel='stylesheet' id='crayon-css'  href='style/css/crayon.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='crayon-theme-github-css'  href='style/css/github.css' type='text/css' media='all' />
<link rel='stylesheet' id='crayon-font-droid-sans-mono-css'  href='style/css/droid-sans-mono.css' type='text/css' media='all' />
<link rel='stylesheet' id='smartideo_css-css'  href='style/css/smartideo.css' type='text/css' media='screen' />
<link rel='stylesheet' id='toc-screen-css'  href='style/css/screen.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r-font-awesome-front-css'  href='style/css/font-awesome.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r_bootstrap-front-css'  href='style/css/bootstrap-front.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r_animate-css'  href='style/css/animate.css' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css'  href='style/css/bootstrap.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css'  href='style/css/font-awesome01.min' type='text/css' media='all' />
<link rel='stylesheet' id='slicknav-css'  href='style/css/slicknav.css' type='text/css' media='all' />
<link rel='stylesheet' id='aster-stylesheet-css'  href='style/css/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='aster-responsive-css'  href='style/css/responsive.css' type='text/css' media='all' />
<link rel='stylesheet' id='aster-google-fonts-css'  href='https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C300%2C300italic%2C400italic%2C600%2C600italic%2C700%2C700italic&#038;subset=latin%2Clatin-ext' type='text/css' media='all' />
<link rel='stylesheet' id='xhshop_css-css'  href='style/css/api-form.css' type='text/css' media='all' />
<script type='text/javascript' src='style/js/jquery.js'></script>
<script type='text/javascript' src='style/js/jquery-migrate.min.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var CrayonSyntaxSettings = {"version":"_2.7.2_beta","is_admin":"0","ajaxurl":"http:\/\/jspang.com\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
var CrayonSyntaxStrings = {"copy":"\u4f7f\u7528 %s \u590d\u5236\uff0c\u4f7f\u7528 %s \u7c98\u8d34\u3002","minimize":"\u70b9\u51fb\u5c55\u5f00\u4ee3\u7801"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/crayon.min.js'></script>
<link rel='https://api.w.org/' href='http://jspang.com/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://jspang.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://jspang.com/wp-includes/wlwmanifest.xml" /> 
<link rel='prev' title='【第四季】Vue2.0视频教程-实例和内置组件（共4集）' href='http://jspang.com/2017/04/09/vue2_4/' />
<link rel='next' title='技术胖的Vue-router视频教程' href='http://jspang.com/2017/04/13/vue-router/' />
<meta name="generator" content="WordPress 4.8.2" />
<link rel="canonical" href="http://jspang.com/2017/04/10/vue-cli/" />
<link rel='shortlink' href='http://jspang.com/?p=1411' />
<link rel="alternate" type="application/json+oembed" href="http://jspang.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fjspang.com%2F2017%2F04%2F10%2Fvue-cli%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://jspang.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fjspang.com%2F2017%2F04%2F10%2Fvue-cli%2F&#038;format=xml" />
<style type="text/css">div#toc_container ul li {font-size: 80%;}</style>		<style type="text/css" id="wp-custom-css">
			/*
您可以在此处加入您的CSS。

点击上方的帮助图标来了解更多。
*/
#page-links{
    margin: 20px 5px;
	color:#222;
    line-height: 33px;
}
#page-links a{ 
    display: inline-block;
    line-height: 20px;
    padding:3px 10px 3px 10px;
    border:1px solid #ccc;
}
.toc_list li{
  list-style:none;
}		</style>
	
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?f71290979fed5851ccca7bda346dcdf7";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>


</head>

<body class="post-template-default single single-post postid-1411 single-format-standard">


<header class="header">
	<div class="header-top text-center">

					<div class="text-logo">
				<a href="http://jspang.com/">技术胖-胜洪宇关注web前端技术</a>
				<p>前端免费视频第一博客。</p>
			</div><!-- /.text-logo -->
			</div><!-- /.header-top -->

	<nav class="main-menu">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div id="navigation-wrapper">
						<ul id="menu-%e9%a1%b6%e9%83%a8%e8%8f%9c%e5%8d%95" class="top-menu"><li id="menu-item-1192" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1192"><a href="http://jspang.com">首页</a></li>
<li id="menu-item-1186" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1186"><a href="http://jspang.com/category/webnote/">前端日记</a></li>
<li id="menu-item-1188" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor menu-item-1188"><a href="http://jspang.com/category/learn/">视频教程</a></li>
<li id="menu-item-1187" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1187"><a href="http://jspang.com/category/python%e9%85%92%e5%90%a7/">Python酒吧</a></li>
<li id="menu-item-1292" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1292"><a href="http://blog.jspang.com">大胖逼逼叨</a></li>
<li id="menu-item-1189" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1189"><a href="http://jspang.com/category/uncategorized/">读书笔记</a></li>
<li id="menu-item-1190" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1190"><a href="http://jspang.com/category/live/">生活趣事</a></li>
<li id="menu-item-1191" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1191"><a href="http://jspang.com/resume/">自我介绍</a></li>
<li id="menu-item-1291" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1291"><a href="http://jspang.com/navbar/">前端导航</a></li>
</ul>					</div>
					<div class="menu-mobile"></div>
				</div>
			</div>
		</div>
	</nav><!-- /.main-menu -->

</header><!-- /.header -->

<div class="container main-content">
	<div class="row">
		<div class="col-md-8">
			
				<article id="post-1411" class="post-1411 post type-post status-publish format-standard has-post-thumbnail hentry category-vue2 tag-vue">
            <!--
        <div class="thumbnails">
            <img width="360" height="270" src="style/images/vue_cli.jpg" class="post-thumbnail img-responsive wp-post-image" alt="" srcset="http://jspang.com/wp-content/uploads/2017/04/vue_cli.jpg 360w, http://jspang.com/wp-content/uploads/2017/04/vue_cli-300x225.jpg 300w" sizes="(max-width: 360px) 100vw, 360px" />        </div>
        -->
    
    <div class="padding-content">
        <header class="entry-header">
            <h2 class="entry-title">技术胖的Vue-cli 视频教程</h2>        </header> <!--/.entry-header -->
        
                <div class="entry-meta">
            		<ul class="list-inline">
			<li>
                <span class="author vcard">
                    By <a class="url fn n" href="http://jspang.com/author/jspang001/">技术胖</a>                </span>
			</li>

			<li>/</li>

			<li>
				<span class="posted-on"><time class="entry-date published" datetime="2017-04-10T11:32:07+00:00">2017年4月10日</time><time class="updated hidden" datetime="2017-05-22T08:32:47+00:00">2017年5月22日</time></span>
			</li>
		</ul>
		        </div><!-- .entry-meta -->
                        <div class="entry-content">
            <div id="toc_container" class="toc_wrap_right have_bullets"><p class="toc_title">目录</p><ul class="toc_list"><li><a href="#1vue-cli">第1节：Vue-cli，开始吧骚年</a></li><li><a href="#2vue-cli">第2节：Vue-cli项目结构讲解</a></li><li><a href="#3vue-cli">第3节：解读Vue-cli的模板</a></li></ul></div>
<p>Vue-cli是vue官方出品的快速构建单页应用的<span style="color: #ff6600;">脚手架</span>，如果你是初次尝试Vue，我不建议使用，推荐你老老实实用普通引入javascript文件的方式进行学习（你可以去看我的vue视频教程的1-4季），这里牵扯的东西很多，有webpack，npm，nodejs，babel等等，很容易产生从入门就放弃的思想。</p>
<p>为了您学习方便，这里给出Vue基础视频的链接,如果你是新手，请按照这个顺序学习。</p>
<p style="padding-left: 30px;">1、<a href="http://jspang.com/2017/02/23/vue2_01/">【第一季】Vue2.0视频教程-入门和内部指令(共8集)</a></p>
<p style="padding-left: 30px;">2、<a href="http://jspang.com/2017/03/14/vue2_02/">【第二季】Vue2.0视频教程-全局API(共9集)</a></p>
<p style="padding-left: 30px;">3、<a href="http://jspang.com/2017/03/26/vue3/">【第三季】Vue2.0视频教程-选项（共6集）</a></p>
<p style="padding-left: 30px;">4、<a href="http://jspang.com/2017/04/09/vue2_4/" rel="bookmark">【第四季】VUE2.0视频教程-实例和内置组件（共4集）</a></p>
<p style="padding-left: 30px;">5、<a href="http://jspang.com/2016/11/24/webpack/">跟技术胖学webpack视频教程</a></p>
<p>如果您想完整的学习Vue知识框架和细节，我建议您还是脚踏实地的学完上边的课程，并作一些简单的练习。如果你已经有了Vue的基础知识，本视频教程您可以完全听懂。</p>
<h3>教程目录：</h3>
<p><a href="#one">第1节：Vue-cli，开始吧骚年</a></p>
<p><a href="#two">第2节：Vue-cli项目结构讲解</a></p>
<p><a href="#three">第3节：解读Vue-cli的模板</a></p>
<hr />
<p>&nbsp;</p>
<h2><span id="1vue-cli"><a name="one"></a><span style="color: #ff6600;">第1节：Vue-cli，开始吧骚年</span></span></h2>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=w0392e8jcod&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p><span style="color: #ff6600;"><strong>一、安装vue-cli</strong></span></p>
<p>安装vue-cli的前提是你已经安装了npm，安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入<span style="color: #ff6600;">npm -v</span>  检测你是否安装了npm和版本情况。出现版本号说明你已经安装了npm和node，我这里的npm版本为3.10.10。如果该命令不可以使用，需要安装node软件包，根据你的系统版本选择下载安装就可以了。</p>
<p>下载地址：http://nodejs.cn/download/</p>
<p><img class="alignnone size-thumbnail" src="style/images/20170409092038.png" width="241" height="42" /></p>
<p>npm没有问题，接下来我们可以用npm 命令安装vue-cli了，在命令行输入下面的命令：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7096715594924773100" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install vue-cli -g</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7096715594924773100-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7096715594924773100-1"><span class="crayon-e">npm </span><span class="crayon-e">install </span><span class="crayon-v">vue</span><span class="crayon-o">-</span><span class="crayon-v">cli</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-v">g</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0008 seconds] -->
<p>-g :代表全局安装。如果你安装时报错，一般是网络问题，你可以尝试用cnpm来进行安装。安装完成后，可以用vue -V来进行查看 vue-cli的版本号。注意这里的V是大写的。我这里版本号是2.8.1.</p>
<p><img class="alignnone size-thumbnail" src="style/images/20170409093230.png" width="526" height="53" /></p>
<p>如果vue -V的命令管用了，说明已经顺利的把vue-cli安装到我们的计算机里了。</p>
<p>&nbsp;</p>
<p><span style="color: #ff6600;"><strong>二、初始化项目</strong></span></p>
<p>我们用vue init命令来初始化项目，具体看一下这条命令的使用方法。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f70967155c5112621584" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
$ vue init &lt;template-name&gt; &lt;project-name&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f70967155c5112621584-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f70967155c5112621584-1"><span class="crayon-sy">$</span><span class="crayon-h"> </span><span class="crayon-e">vue </span><span class="crayon-v">init</span><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-v">template</span><span class="crayon-o">-</span><span class="crayon-v">name</span><span class="crayon-o">&gt;</span><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-v">project</span><span class="crayon-o">-</span><span class="crayon-v">name</span><span class="crayon-o">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0006 seconds] -->
<p><span style="color: #ff6600;">init</span>：表示我要用vue-cli来初始化项目</p>
<p><span style="color: #ff6600;">&lt;template-name&gt;</span>：表示模板名称，vue-cli官方为我们提供了5种模板，</p>
<p style="padding-left: 30px;">webpack-一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。</p>
<p style="padding-left: 30px;">webpack-simple-一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。</p>
<p style="padding-left: 30px;">browserify-一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。</p>
<p style="padding-left: 30px;">browserify-simple-一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。</p>
<p style="padding-left: 30px;">simple-一个最简单的单页应用模板。</p>
<p><span style="color: #ff6600;">&lt;project-name&gt;</span>：标识项目名称，这个你可以根据自己的项目来起名字。</p>
<p>在实际开发中，一般我们都会使用webpack这个模板，那我们这里也安装这个模板，在命令行输入以下命令：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f70967155d0693013422" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
vue init webpack vuecliTest</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f70967155d0693013422-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f70967155d0693013422-1"><span class="crayon-e">vue </span><span class="crayon-e">init </span><span class="crayon-e">webpack </span><span class="crayon-v">vuecliTest</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>输入命令后，会询问我们几个简单的选项，我们根据自己的需要进行填写就可以了。</p>
<ul>
<li>Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest</li>
<li>Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。</li>
<li>Author：作者，如果你有配置git的作者，他会读取。</li>
<li>Install  vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y</li>
<li>Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，如果你是大型团队开发，最好是进行配置。</li>
<li>setup unit tests with  Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。</li>
<li>Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。</li>
</ul>
<p><img class="alignnone size-thumbnail" src="style/images/201704091024301.png" width="677" height="443" /></p>
<p>命令行出现上面的文字，说明我们已经初始化好了第一步。命令行提示我们现在可以作的三件事情。</p>
<p>1、<span style="color: #ff6600;">cd vuecliTest</span>  进入我们的vue项目目录。</p>
<p>2、<span style="color: #ff6600;">npm install</span>  安装我们的项目依赖包，也就是安装package.json里的包，如果你网速不好，你也可以使用cnpm来安装。</p>
<p>3、<span style="color: #ff6600;">npm run dev</span> 开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开，并实时监视我们的代码更改，即时呈现给我们。</p>
<p><img class="alignnone " src="style/images/20170409103620.png" width="605" height="482" /></p>
<p>出现这个页面，说明我们的初始化已经成功，现在可以快乐的玩耍了。</p>
<hr />
<h2><span id="2vue-cli"><a name="two"></a><span style="color: #ff6600;">第2节：Vue-cli项目结构讲解</span></span></h2>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=g0392zq9ltq&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>vue-cli脚手架工具就是为我们搭建了开发所需要的环境，为我们省去了很多精力。有必要对这个环境进行熟悉，我们就从项目的结构讲起。</p>
<p><span style="color: #ff6600;">Ps：由于版本实时更新和你选择安装的不同（这里列出的是模板为webpack的目录结构），所以你看到的有可能和下边的有所差别。</span></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f70967155d9277038238" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
.
|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- src                              // 源码目录
|   |-- components                     // vue公共组件
|   |-- store                          // vuex的状态管理
|   |-- App.vue                        // 页面入口文件
|   |-- main.js                        // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|   |-- data                           // 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息
.</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f70967155d9277038238-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155d9277038238-2">2</div><div class="crayon-num" data-line="crayon-59f70967155d9277038238-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155d9277038238-4">4</div><div class="crayon-num" data-line="crayon-59f70967155d9277038238-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155d9277038238-6">6</div><div class="crayon-num" data-line="crayon-59f70967155d9277038238-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155d9277038238-8">8</div><div class="crayon-num" data-line="crayon-59f70967155d9277038238-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155d9277038238-10">10</div><div class="crayon-num" data-line="crayon-59f70967155d9277038238-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155d9277038238-12">12</div><div class="crayon-num" data-line="crayon-59f70967155d9277038238-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155d9277038238-14">14</div><div class="crayon-num" data-line="crayon-59f70967155d9277038238-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155d9277038238-16">16</div><div class="crayon-num" data-line="crayon-59f70967155d9277038238-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155d9277038238-18">18</div><div class="crayon-num" data-line="crayon-59f70967155d9277038238-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155d9277038238-20">20</div><div class="crayon-num" data-line="crayon-59f70967155d9277038238-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155d9277038238-22">22</div><div class="crayon-num" data-line="crayon-59f70967155d9277038238-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155d9277038238-24">24</div><div class="crayon-num" data-line="crayon-59f70967155d9277038238-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155d9277038238-26">26</div><div class="crayon-num" data-line="crayon-59f70967155d9277038238-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155d9277038238-28">28</div><div class="crayon-num" data-line="crayon-59f70967155d9277038238-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155d9277038238-30">30</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f70967155d9277038238-1"><span class="crayon-sy">.</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155d9277038238-2"><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">build</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span>项目构建<span class="crayon-sy">(</span><span class="crayon-v">webpack</span><span class="crayon-sy">)</span>相关代码</div><div class="crayon-line" id="crayon-59f70967155d9277038238-3"><span class="crayon-o">|</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">build</span><span class="crayon-e">.js</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span>生产环境构建代码</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155d9277038238-4"><span class="crayon-o">|</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">check</span><span class="crayon-o">-</span><span class="crayon-v">version</span><span class="crayon-e">.js</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span>检查<span class="crayon-i">node</span>、<span class="crayon-i">npm</span>等版本</div><div class="crayon-line" id="crayon-59f70967155d9277038238-5"><span class="crayon-o">|</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">dev</span><span class="crayon-o">-</span><span class="crayon-v">client</span><span class="crayon-e">.js</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span>热重载相关</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155d9277038238-6"><span class="crayon-o">|</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">dev</span><span class="crayon-o">-</span><span class="crayon-v">server</span><span class="crayon-e">.js</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span>构建本地服务器</div><div class="crayon-line" id="crayon-59f70967155d9277038238-7"><span class="crayon-o">|</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">utils</span><span class="crayon-e">.js</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span>构建工具相关</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155d9277038238-8"><span class="crayon-o">|</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">webpack</span><span class="crayon-e">.base</span><span class="crayon-e">.conf</span><span class="crayon-e">.js</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span><span class="crayon-i">webpack</span>基础配置</div><div class="crayon-line" id="crayon-59f70967155d9277038238-9"><span class="crayon-o">|</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">webpack</span><span class="crayon-e">.dev</span><span class="crayon-e">.conf</span><span class="crayon-e">.js</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span><span class="crayon-i">webpack</span>开发环境配置</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155d9277038238-10"><span class="crayon-o">|</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">webpack</span><span class="crayon-e">.prod</span><span class="crayon-e">.conf</span><span class="crayon-e">.js</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span><span class="crayon-i">webpack</span>生产环境配置</div><div class="crayon-line" id="crayon-59f70967155d9277038238-11"><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">config</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span>项目开发环境配置</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155d9277038238-12"><span class="crayon-o">|</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">dev</span><span class="crayon-e">.env</span><span class="crayon-e">.js</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span>开发环境变量</div><div class="crayon-line" id="crayon-59f70967155d9277038238-13"><span class="crayon-o">|</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">index</span><span class="crayon-e">.js</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span>项目一些配置变量</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155d9277038238-14"><span class="crayon-o">|</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">prod</span><span class="crayon-e">.env</span><span class="crayon-e">.js</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span>生产环境变量</div><div class="crayon-line" id="crayon-59f70967155d9277038238-15"><span class="crayon-o">|</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-r">test</span><span class="crayon-e">.env</span><span class="crayon-e">.js</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span>测试环境变量</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155d9277038238-16"><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">src</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span>源码目录</div><div class="crayon-line" id="crayon-59f70967155d9277038238-17"><span class="crayon-o">|</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">components</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span><span class="crayon-i">vue</span>公共组件</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155d9277038238-18"><span class="crayon-o">|</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">store</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span><span class="crayon-i">vuex</span>的状态管理</div><div class="crayon-line" id="crayon-59f70967155d9277038238-19"><span class="crayon-o">|</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">App</span><span class="crayon-e">.vue</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span>页面入口文件</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155d9277038238-20"><span class="crayon-o">|</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">main</span><span class="crayon-e">.js</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span>程序入口文件，加载各种公共组件</div><div class="crayon-line" id="crayon-59f70967155d9277038238-21"><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">static</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span>静态文件，比如一些图片，<span class="crayon-i">json</span>数据等</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155d9277038238-22"><span class="crayon-o">|</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">data</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span>群聊分析得到的数据用于数据可视化</div><div class="crayon-line" id="crayon-59f70967155d9277038238-23"><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-e">.babelrc</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span><span class="crayon-i">ES6</span>语法编译配置</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155d9277038238-24"><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-e">.editorconfig</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span>定义代码格式</div><div class="crayon-line" id="crayon-59f70967155d9277038238-25"><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-e">.gitignore</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span><span class="crayon-i">git</span>上传需要忽略的文件格式</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155d9277038238-26"><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">README</span><span class="crayon-e">.md</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span>项目说明</div><div class="crayon-line" id="crayon-59f70967155d9277038238-27"><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">favicon</span><span class="crayon-e">.ico</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155d9277038238-28"><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-v">index</span><span class="crayon-e">.html</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span>入口页面</div><div class="crayon-line" id="crayon-59f70967155d9277038238-29"><span class="crayon-o">|</span><span class="crayon-o">--</span><span class="crayon-h"> </span><span class="crayon-t">package</span><span class="crayon-e">.json</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">/</span><span class="crayon-o">/</span><span class="crayon-h"> </span>项目基本信息</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155d9277038238-30"><span class="crayon-sy">.</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0103 seconds] -->
<p>重要文件讲解：</p>
<h3>package.json</h3>
<p>package.json文件是项目根目录下的一个文件，定义该项目开发所需要的各种模块以及一些项目配置信息（如项目名称、版本、描述、作者等）。</p>
<p><strong>package.json 里的scripts字段</strong>，这个字段定义了你可以用npm运行的命令。在开发环境下，在命令行工具中运行npm run dev 就相当于执行 node build/dev-server.js  .也就是开启了一个node写的开发行建议服务器。由此可以看出script字段是用来指定npm相关命令的缩写。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f70967155e1748629037" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js"
  },</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f70967155e1748629037-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e1748629037-2">2</div><div class="crayon-num" data-line="crayon-59f70967155e1748629037-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e1748629037-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f70967155e1748629037-1"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"scripts"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e1748629037-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"dev"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"node build/dev-server.js"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f70967155e1748629037-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"build"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"node build/build.js"</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e1748629037-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0010 seconds] -->
<p><strong>dependencies字段和devDependencies字段</strong></p>
<ul>
<li>dependencies字段指项目运行时所依赖的模块；</li>
<li>devDependencies字段指定了项目开发时所依赖的模块；</li>
</ul>
<p>在命令行中运行npm install命令，会自动安装dependencies和devDempendencies字段中的模块。package.json还有很多相关配置，如果你想全面了解，可以专门去百度学习一下。</p>
<h3>webpack配置相关</h3>
<p>我们在上面说了运行npm run dev 就相当于执行了node build/dev-server.js,说明这个文件相当重要，先来熟悉一下它。 我贴出代码并给出重要的解释。</p>
<h4>dev-server.js</h4>
<p></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f70967155e6868598562" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
// 检查 Node 和 npm 版本
require('./check-versions')()

// 获取 config/index.js 的默认配置
var config = require('../config')

// 如果 Node 的环境无法判断当前是 dev / product 环境
// 使用 config.dev.env.NODE_ENV 作为当前的环境

if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)

// 使用 NodeJS 自带的文件路径工具
var path = require('path')

// 使用 express
var express = require('express')

// 使用 webpack
var webpack = require('webpack')

// 一个可以强制打开浏览器并跳转到指定 url 的插件
var opn = require('opn')

// 使用 proxyTable
var proxyMiddleware = require('http-proxy-middleware')

// 使用 dev 环境的 webpack 配置
var webpackConfig = require('./webpack.dev.conf')

// default port where dev server listens for incoming traffic

// 如果没有指定运行端口，使用 config.dev.port 作为运行端口
var port = process.env.PORT || config.dev.port

// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware

// 使用 config.dev.proxyTable 的配置作为 proxyTable 的代理配置
var proxyTable = config.dev.proxyTable

// 使用 express 启动一个服务
var app = express()

// 启动 webpack 进行编译
var compiler = webpack(webpackConfig)

// 启动 webpack-dev-middleware，将 编译后的文件暂存到内存中
var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  stats: {
    colors: true,
    chunks: false
  }
})

// 启动 webpack-hot-middleware，也就是我们常说的 Hot-reload
var hotMiddleware = require('webpack-hot-middleware')(compiler)
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})

// proxy api requests
// 将 proxyTable 中的请求配置挂在到启动的 express 服务上
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(context, options))
})

// handle fallback for HTML5 history API
// 使用 connect-history-api-fallback 匹配资源，如果不匹配就可以重定向到指定地址
app.use(require('connect-history-api-fallback')())

// serve webpack bundle output
// 将暂存到内存中的 webpack 编译后的文件挂在到 express 服务上
app.use(devMiddleware)

// enable hot-reload and state-preserving
// compilation error display
// 将 Hot-reload 挂在到 express 服务上
app.use(hotMiddleware)

// serve pure static assets
// 拼接 static 文件夹的静态资源路径
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
// 为静态资源提供响应服务
app.use(staticPath, express.static('./static'))

// 让我们这个 express 服务监听 port 的请求，并且将此服务作为 dev-server.js 的接口暴露
module.exports = app.listen(port, function (err) {
  if (err) {
    console.log(err)
    return
  }
  var uri = 'http://localhost:' + port
  console.log('Listening at ' + uri + '\n')

  // when env is testing, don't need open it
  // 如果不是测试环境，自动打开浏览器并跳到我们的开发地址
  if (process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
})</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f70967155e6868598562-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-2">2</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-4">4</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-6">6</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-8">8</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-10">10</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-12">12</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-14">14</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-16">16</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-18">18</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-20">20</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-22">22</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-24">24</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-26">26</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-28">28</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-30">30</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-32">32</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-33">33</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-34">34</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-35">35</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-36">36</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-37">37</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-38">38</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-39">39</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-40">40</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-41">41</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-42">42</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-43">43</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-44">44</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-45">45</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-46">46</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-47">47</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-48">48</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-49">49</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-50">50</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-51">51</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-52">52</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-53">53</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-54">54</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-55">55</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-56">56</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-57">57</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-58">58</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-59">59</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-60">60</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-61">61</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-62">62</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-63">63</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-64">64</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-65">65</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-66">66</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-67">67</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-68">68</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-69">69</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-70">70</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-71">71</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-72">72</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-73">73</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-74">74</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-75">75</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-76">76</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-77">77</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-78">78</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-79">79</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-80">80</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-81">81</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-82">82</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-83">83</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-84">84</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-85">85</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-86">86</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-87">87</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-88">88</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-89">89</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-90">90</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-91">91</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-92">92</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-93">93</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-94">94</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-95">95</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-96">96</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-97">97</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-98">98</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-99">99</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-100">100</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-101">101</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-102">102</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-103">103</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-104">104</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-105">105</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-106">106</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-107">107</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155e6868598562-108">108</div><div class="crayon-num" data-line="crayon-59f70967155e6868598562-109">109</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f70967155e6868598562-1"><span class="crayon-c">// 检查 Node 和 npm 版本</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-2"><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'./check-versions'</span><span class="crayon-sy">)</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-4"><span class="crayon-c">// 获取 config/index.js 的默认配置</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-5"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">config</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'../config'</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-6">&nbsp;</div><div class="crayon-line" id="crayon-59f70967155e6868598562-7"><span class="crayon-c">// 如果 Node 的环境无法判断当前是 dev / product 环境</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-8"><span class="crayon-c">// 使用 config.dev.env.NODE_ENV 作为当前的环境</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-9">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-10"><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-o">!</span><span class="crayon-v">process</span><span class="crayon-sy">.</span><span class="crayon-v">env</span><span class="crayon-sy">.</span><span class="crayon-v">NODE_ENV</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-v">process</span><span class="crayon-sy">.</span><span class="crayon-v">env</span><span class="crayon-sy">.</span><span class="crayon-v">NODE_ENV</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">JSON</span><span class="crayon-sy">.</span><span class="crayon-e">parse</span><span class="crayon-sy">(</span><span class="crayon-v">config</span><span class="crayon-sy">.</span><span class="crayon-v">dev</span><span class="crayon-sy">.</span><span class="crayon-v">env</span><span class="crayon-sy">.</span><span class="crayon-v">NODE_ENV</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-11">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-12"><span class="crayon-c">// 使用 NodeJS 自带的文件路径工具</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-13"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">path</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'path'</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-14">&nbsp;</div><div class="crayon-line" id="crayon-59f70967155e6868598562-15"><span class="crayon-c">// 使用 express</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-16"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">express</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'express'</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-17">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-18"><span class="crayon-c">// 使用 webpack</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-19"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">webpack</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'webpack'</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-20">&nbsp;</div><div class="crayon-line" id="crayon-59f70967155e6868598562-21"><span class="crayon-c">// 一个可以强制打开浏览器并跳转到指定 url 的插件</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-22"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">opn</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'opn'</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-23">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-24"><span class="crayon-c">// 使用 proxyTable</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-25"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">proxyMiddleware</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'http-proxy-middleware'</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-26">&nbsp;</div><div class="crayon-line" id="crayon-59f70967155e6868598562-27"><span class="crayon-c">// 使用 dev 环境的 webpack 配置</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-28"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">webpackConfig</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'./webpack.dev.conf'</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-29">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-30"><span class="crayon-c">// default port where dev server listens for incoming traffic</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-31">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-32"><span class="crayon-c">// 如果没有指定运行端口，使用 config.dev.port 作为运行端口</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-33"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">port</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">process</span><span class="crayon-sy">.</span><span class="crayon-v">env</span><span class="crayon-sy">.</span><span class="crayon-v">PORT</span><span class="crayon-h"> </span><span class="crayon-o">||</span><span class="crayon-h"> </span><span class="crayon-v">config</span><span class="crayon-sy">.</span><span class="crayon-v">dev</span><span class="crayon-sy">.</span><span class="crayon-v">port</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-34">&nbsp;</div><div class="crayon-line" id="crayon-59f70967155e6868598562-35"><span class="crayon-c">// Define HTTP proxies to your custom API backend</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-36"><span class="crayon-c">// https://github.com/chimurai/http-proxy-middleware</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-37">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-38"><span class="crayon-c">// 使用 config.dev.proxyTable 的配置作为 proxyTable 的代理配置</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-39"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">proxyTable</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">config</span><span class="crayon-sy">.</span><span class="crayon-v">dev</span><span class="crayon-sy">.</span><span class="crayon-v">proxyTable</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-40">&nbsp;</div><div class="crayon-line" id="crayon-59f70967155e6868598562-41"><span class="crayon-c">// 使用 express 启动一个服务</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-42"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">app</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">express</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-43">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-44"><span class="crayon-c">// 启动 webpack 进行编译</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-45"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">compiler</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">webpack</span><span class="crayon-sy">(</span><span class="crayon-v">webpackConfig</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-46">&nbsp;</div><div class="crayon-line" id="crayon-59f70967155e6868598562-47"><span class="crayon-c">// 启动 webpack-dev-middleware，将 编译后的文件暂存到内存中</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-48"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">devMiddleware</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'webpack-dev-middleware'</span><span class="crayon-sy">)</span><span class="crayon-sy">(</span><span class="crayon-v">compiler</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-49"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">publicPath</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">webpackConfig</span><span class="crayon-sy">.</span><span class="crayon-v">output</span><span class="crayon-sy">.</span><span class="crayon-v">publicPath</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-50"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">stats</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-51"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">colors</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-52"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">chunks</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-53"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-54"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-55">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-56"><span class="crayon-c">// 启动 webpack-hot-middleware，也就是我们常说的 Hot-reload</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-57"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">hotMiddleware</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'webpack-hot-middleware'</span><span class="crayon-sy">)</span><span class="crayon-sy">(</span><span class="crayon-v">compiler</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-58"><span class="crayon-c">// force page reload when html-webpack-plugin template changes</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-59"><span class="crayon-v">compiler</span><span class="crayon-sy">.</span><span class="crayon-e">plugin</span><span class="crayon-sy">(</span><span class="crayon-s">'compilation'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">compilation</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-60"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">compilation</span><span class="crayon-sy">.</span><span class="crayon-e">plugin</span><span class="crayon-sy">(</span><span class="crayon-s">'html-webpack-plugin-after-emit'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">data</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">cb</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-61"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">hotMiddleware</span><span class="crayon-sy">.</span><span class="crayon-e">publish</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-v">action</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'reload'</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-62"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">cb</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-63"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-64"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-65">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-66"><span class="crayon-c">// proxy api requests</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-67"><span class="crayon-c">// 将 proxyTable 中的请求配置挂在到启动的 express 服务上</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-68"><span class="crayon-t">Object</span><span class="crayon-sy">.</span><span class="crayon-e">keys</span><span class="crayon-sy">(</span><span class="crayon-v">proxyTable</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-st">forEach</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">context</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-69"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">options</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">proxyTable</span><span class="crayon-sy">[</span><span class="crayon-v">context</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-70"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-r">typeof</span><span class="crayon-h"> </span><span class="crayon-v">options</span><span class="crayon-h"> </span><span class="crayon-o">===</span><span class="crayon-h"> </span><span class="crayon-s">'string'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-71"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">options</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-v">target</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-i">options</span><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-72"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-73"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">app</span><span class="crayon-sy">.</span><span class="crayon-st">use</span><span class="crayon-sy">(</span><span class="crayon-e">proxyMiddleware</span><span class="crayon-sy">(</span><span class="crayon-v">context</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">options</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-74"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-75">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-76"><span class="crayon-c">// handle fallback for HTML5 history API</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-77"><span class="crayon-c">// 使用 connect-history-api-fallback 匹配资源，如果不匹配就可以重定向到指定地址</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-78"><span class="crayon-v">app</span><span class="crayon-sy">.</span><span class="crayon-st">use</span><span class="crayon-sy">(</span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'connect-history-api-fallback'</span><span class="crayon-sy">)</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-79">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-80"><span class="crayon-c">// serve webpack bundle output</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-81"><span class="crayon-c">// 将暂存到内存中的 webpack 编译后的文件挂在到 express 服务上</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-82"><span class="crayon-v">app</span><span class="crayon-sy">.</span><span class="crayon-st">use</span><span class="crayon-sy">(</span><span class="crayon-v">devMiddleware</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-83">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-84"><span class="crayon-c">// enable hot-reload and state-preserving</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-85"><span class="crayon-c">// compilation error display</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-86"><span class="crayon-c">// 将 Hot-reload 挂在到 express 服务上</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-87"><span class="crayon-v">app</span><span class="crayon-sy">.</span><span class="crayon-st">use</span><span class="crayon-sy">(</span><span class="crayon-v">hotMiddleware</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-88">&nbsp;</div><div class="crayon-line" id="crayon-59f70967155e6868598562-89"><span class="crayon-c">// serve pure static assets</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-90"><span class="crayon-c">// 拼接 static 文件夹的静态资源路径</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-91"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">staticPath</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">path</span><span class="crayon-sy">.</span><span class="crayon-v">posix</span><span class="crayon-sy">.</span><span class="crayon-e">join</span><span class="crayon-sy">(</span><span class="crayon-v">config</span><span class="crayon-sy">.</span><span class="crayon-v">dev</span><span class="crayon-sy">.</span><span class="crayon-v">assetsPublicPath</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">config</span><span class="crayon-sy">.</span><span class="crayon-v">dev</span><span class="crayon-sy">.</span><span class="crayon-v">assetsSubDirectory</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-92"><span class="crayon-c">// 为静态资源提供响应服务</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-93"><span class="crayon-v">app</span><span class="crayon-sy">.</span><span class="crayon-st">use</span><span class="crayon-sy">(</span><span class="crayon-v">staticPath</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">express</span><span class="crayon-sy">.</span><span class="crayon-m">static</span><span class="crayon-sy">(</span><span class="crayon-s">'./static'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-94">&nbsp;</div><div class="crayon-line" id="crayon-59f70967155e6868598562-95"><span class="crayon-c">// 让我们这个 express 服务监听 port 的请求，并且将此服务作为 dev-server.js 的接口暴露</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-96"><span class="crayon-v">module</span><span class="crayon-sy">.</span><span class="crayon-v">exports</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">app</span><span class="crayon-sy">.</span><span class="crayon-e">listen</span><span class="crayon-sy">(</span><span class="crayon-v">port</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">err</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-97"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">err</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-98"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">err</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-99"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-100"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-101"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-e ">uri</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-s">'http://localhost:'</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-e">port</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-102"><span class="crayon-e">&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">'Listening at '</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-v">uri</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-s">'\n'</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-103">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-104"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">// when env is testing, don't need open it</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-105"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">// 如果不是测试环境，自动打开浏览器并跳到我们的开发地址</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-106"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">process</span><span class="crayon-sy">.</span><span class="crayon-v">env</span><span class="crayon-sy">.</span><span class="crayon-v">NODE_ENV</span><span class="crayon-h"> </span><span class="crayon-o">!==</span><span class="crayon-h"> </span><span class="crayon-s">'testing'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-107"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">opn</span><span class="crayon-sy">(</span><span class="crayon-v">uri</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155e6868598562-108"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f70967155e6868598562-109"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0157 seconds] -->
<p></p>
<h4>webpack.base.confg.js   webpack的基础配置文件</h4>
<p></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f70967155f0836215633" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
...
...
module.export = {
    // 编译入口文件
    entry: {},
    // 编译输出路径
    output: {},
    // 一些解决方案配置
    resolve: {},
    resolveLoader: {},
    module: {
        // 各种不同类型文件加载器配置
        loaders: {
        ...
        ...
        // js文件用babel转码
        {
            test: /\.js$/,
            loader: 'babel',
            include: projectRoot,
            // 哪些文件不需要转码
            exclude: /node_modules/
        },
        ...
        ...
        }
    },
    // vue文件一些相关配置
    vue: {}
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f70967155f0836215633-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f0836215633-2">2</div><div class="crayon-num" data-line="crayon-59f70967155f0836215633-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f0836215633-4">4</div><div class="crayon-num" data-line="crayon-59f70967155f0836215633-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f0836215633-6">6</div><div class="crayon-num" data-line="crayon-59f70967155f0836215633-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f0836215633-8">8</div><div class="crayon-num" data-line="crayon-59f70967155f0836215633-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f0836215633-10">10</div><div class="crayon-num" data-line="crayon-59f70967155f0836215633-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f0836215633-12">12</div><div class="crayon-num" data-line="crayon-59f70967155f0836215633-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f0836215633-14">14</div><div class="crayon-num" data-line="crayon-59f70967155f0836215633-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f0836215633-16">16</div><div class="crayon-num" data-line="crayon-59f70967155f0836215633-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f0836215633-18">18</div><div class="crayon-num" data-line="crayon-59f70967155f0836215633-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f0836215633-20">20</div><div class="crayon-num" data-line="crayon-59f70967155f0836215633-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f0836215633-22">22</div><div class="crayon-num" data-line="crayon-59f70967155f0836215633-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f0836215633-24">24</div><div class="crayon-num" data-line="crayon-59f70967155f0836215633-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f0836215633-26">26</div><div class="crayon-num" data-line="crayon-59f70967155f0836215633-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f0836215633-28">28</div><div class="crayon-num" data-line="crayon-59f70967155f0836215633-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f0836215633-30">30</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f70967155f0836215633-1"><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f0836215633-2"><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span></div><div class="crayon-line" id="crayon-59f70967155f0836215633-3"><span class="crayon-v">module</span><span class="crayon-sy">.</span><span class="crayon-v">export</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f0836215633-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// 编译入口文件</span></div><div class="crayon-line" id="crayon-59f70967155f0836215633-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">entry</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f0836215633-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// 编译输出路径</span></div><div class="crayon-line" id="crayon-59f70967155f0836215633-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">output</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f0836215633-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// 一些解决方案配置</span></div><div class="crayon-line" id="crayon-59f70967155f0836215633-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">resolve</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f0836215633-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">resolveLoader</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f70967155f0836215633-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">module</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f0836215633-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// 各种不同类型文件加载器配置</span></div><div class="crayon-line" id="crayon-59f70967155f0836215633-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">loaders</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f0836215633-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span></div><div class="crayon-line" id="crayon-59f70967155f0836215633-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f0836215633-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// js文件用babel转码</span></div><div class="crayon-line" id="crayon-59f70967155f0836215633-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f0836215633-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">test</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-v">js</span><span class="crayon-sy">$</span><span class="crayon-o">/</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f70967155f0836215633-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'babel'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f0836215633-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">include</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">projectRoot</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f70967155f0836215633-21"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// 哪些文件不需要转码</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f0836215633-22"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">exclude</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-v">node_modules</span><span class="crayon-o">/</span></div><div class="crayon-line" id="crayon-59f70967155f0836215633-23"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f0836215633-24"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span></div><div class="crayon-line" id="crayon-59f70967155f0836215633-25"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f0836215633-26"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f70967155f0836215633-27"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f0836215633-28"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// vue文件一些相关配置</span></div><div class="crayon-line" id="crayon-59f70967155f0836215633-29"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">vue</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f0836215633-30"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0038 seconds] -->
<p>这里有很多webpack的知识，我也有一个专门讲webpack的视频教程，你可以去看一看《<a href="http://jspang.com/2016/11/24/webpack/">跟技术胖学webpack视频教程</a>》。</p>
<h3>.babelrc</h3>
<p>Babel解释器的配置文件，存放在根目录下。Babel是一个转码器，项目里需要用它将ES6代码转为ES5代码。如果你想了解更多，可以查看babel的知识。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f70967155f6433861399" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
  //设定转码规则
  "presets": [
    ["env", { "modules": false }],
    "stage-2"
  ],
  //转码用的插件
  "plugins": ["transform-runtime"],
  "comments": false,
  //对BABEL_ENV或者NODE_ENV指定的不同的环境变量，进行不同的编译操作
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f70967155f6433861399-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f6433861399-2">2</div><div class="crayon-num" data-line="crayon-59f70967155f6433861399-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f6433861399-4">4</div><div class="crayon-num" data-line="crayon-59f70967155f6433861399-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f6433861399-6">6</div><div class="crayon-num" data-line="crayon-59f70967155f6433861399-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f6433861399-8">8</div><div class="crayon-num" data-line="crayon-59f70967155f6433861399-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f6433861399-10">10</div><div class="crayon-num" data-line="crayon-59f70967155f6433861399-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f6433861399-12">12</div><div class="crayon-num" data-line="crayon-59f70967155f6433861399-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f6433861399-14">14</div><div class="crayon-num" data-line="crayon-59f70967155f6433861399-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155f6433861399-16">16</div><div class="crayon-num" data-line="crayon-59f70967155f6433861399-17">17</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f70967155f6433861399-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f6433861399-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">//设定转码规则</span></div><div class="crayon-line" id="crayon-59f70967155f6433861399-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"presets"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f6433861399-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">[</span><span class="crayon-s">"env"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-s">"modules"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f70967155f6433861399-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"stage-2"</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f6433861399-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f70967155f6433861399-7"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">//转码用的插件</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f6433861399-8"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"plugins"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-s">"transform-runtime"</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f70967155f6433861399-9"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"comments"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f6433861399-10"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">//对BABEL_ENV或者NODE_ENV指定的不同的环境变量，进行不同的编译操作</span></div><div class="crayon-line" id="crayon-59f70967155f6433861399-11"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"env"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f6433861399-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"test"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f70967155f6433861399-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"presets"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-s">"env"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"stage-2"</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f6433861399-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"plugins"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-h"> </span><span class="crayon-s">"istanbul"</span><span class="crayon-h"> </span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-59f70967155f6433861399-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155f6433861399-16"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f70967155f6433861399-17"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0023 seconds] -->
<p></p>
<h3>.editorconfig</h3>
<p>该文件定义项目的编码规范，编译器的行为会与.editorconfig文件中定义的一致，并且其优先级比编译器自身的设置要高，这在多人合作开发项目时十分有用而且必要。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f70967155fc330877951" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
root = true

[*]    // 对所有文件应用下面的规则
charset = utf-8                    // 编码规则用utf-8
indent_style = space               // 缩进用空格
indent_size = 2                    // 缩进数量为2个空格
end_of_line = lf                   // 换行符格式
insert_final_newline = true        // 是否在文件的最后插入一个空行
trim_trailing_whitespace = true    // 是否删除行尾的空格</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f70967155fc330877951-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155fc330877951-2">2</div><div class="crayon-num" data-line="crayon-59f70967155fc330877951-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155fc330877951-4">4</div><div class="crayon-num" data-line="crayon-59f70967155fc330877951-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155fc330877951-6">6</div><div class="crayon-num" data-line="crayon-59f70967155fc330877951-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f70967155fc330877951-8">8</div><div class="crayon-num" data-line="crayon-59f70967155fc330877951-9">9</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f70967155fc330877951-1"><span class="crayon-v">root</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-t">true</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155fc330877951-2">&nbsp;</div><div class="crayon-line" id="crayon-59f70967155fc330877951-3"><span class="crayon-sy">[</span><span class="crayon-o">*</span><span class="crayon-sy">]</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// 对所有文件应用下面的规则</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155fc330877951-4"><span class="crayon-v">charset</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">utf</span><span class="crayon-o">-</span><span class="crayon-cn">8</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// 编码规则用utf-8</span></div><div class="crayon-line" id="crayon-59f70967155fc330877951-5"><span class="crayon-v">indent_style</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">space</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-c">// 缩进用空格</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155fc330877951-6"><span class="crayon-v">indent_size</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">2</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// 缩进数量为2个空格</span></div><div class="crayon-line" id="crayon-59f70967155fc330877951-7"><span class="crayon-v">end_of_line</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">lf</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-c">// 换行符格式</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f70967155fc330877951-8"><span class="crayon-v">insert_final_newline</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// 是否在文件的最后插入一个空行</span></div><div class="crayon-line" id="crayon-59f70967155fc330877951-9"><span class="crayon-v">trim_trailing_whitespace</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// 是否删除行尾的空格</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0019 seconds] -->
<p>这是比较重要的关于vue-cli的配置文件，当然还有很多文件，我们会在以后的文章中讲解。</p>
<hr />
<h2><span id="3vue-cli"><a name="three"></a><span style="color: #ff6600;">第3节：解读Vue-cli的模板</span></span></h2>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=d0392v00bcl&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>我们通过两节课的讲解，你对vue-cli应该有了基本的了解，这节我们主要了解一下Vue-cli的模板操作，包括增加模板，修改模板，以及一个常规模板的基本结构。</p>
<h3>一、npm run build 命令</h3>
<p>有小伙伴问我，如何把写好的Vue网页放到服务器上，那我就在这里讲解一下，主要的命令就是要用到npm run build 命令。我们在命令行中输入npm run build命令后，vue-cli会自动进行项目发布打包。你在package.json文件的scripts字段中可以看出，你执行的npm run build命令就相对执行的 node build/build.js 。</p>
<h4>package.json的scripts 字段：</h4>
<p></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7096715603511547750" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js"
  },</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7096715603511547750-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7096715603511547750-2">2</div><div class="crayon-num" data-line="crayon-59f7096715603511547750-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7096715603511547750-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7096715603511547750-1"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"scripts"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7096715603511547750-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"dev"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"node build/dev-server.js"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7096715603511547750-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"build"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"node build/build.js"</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7096715603511547750-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0011 seconds] -->
<p>在执行完npm run build命令后，在你的项目根目录生成了dist文件夹，这个文件夹里边就是我们要传到服务器上的文件。</p>
<p>dist文件夹下目录包括：</p>
<ul>
<li>index.html 主页文件:因为我们开发的是单页web应用，所以说一般只有一个html文件。</li>
<li>static 静态资源文件夹：里边js、CSS和一些图片。</li>
</ul>
<h3>二、main.js文件解读</h3>
<p>main.js是整个项目的入口文件,在src文件夹下：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7096715608095933974" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
import Vue from 'vue'      
import App from './App'
import router from './router'

Vue.config.productionTip = false   //生产环境提示，这里设置成了false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '&lt;App/&gt;',
  components: { App }
})</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7096715608095933974-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7096715608095933974-2">2</div><div class="crayon-num" data-line="crayon-59f7096715608095933974-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7096715608095933974-4">4</div><div class="crayon-num" data-line="crayon-59f7096715608095933974-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7096715608095933974-6">6</div><div class="crayon-num" data-line="crayon-59f7096715608095933974-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7096715608095933974-8">8</div><div class="crayon-num" data-line="crayon-59f7096715608095933974-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7096715608095933974-10">10</div><div class="crayon-num" data-line="crayon-59f7096715608095933974-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7096715608095933974-12">12</div><div class="crayon-num" data-line="crayon-59f7096715608095933974-13">13</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7096715608095933974-1"><span class="crayon-e">import </span><span class="crayon-e">Vue </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'vue'</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7096715608095933974-2"><span class="crayon-e">import </span><span class="crayon-e">App </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'./App'</span></div><div class="crayon-line" id="crayon-59f7096715608095933974-3"><span class="crayon-e">import </span><span class="crayon-e">router </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'./router'</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7096715608095933974-4">&nbsp;</div><div class="crayon-line" id="crayon-59f7096715608095933974-5"><span class="crayon-v">Vue</span><span class="crayon-sy">.</span><span class="crayon-v">config</span><span class="crayon-sy">.</span><span class="crayon-v">productionTip</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-c">//生产环境提示，这里设置成了false</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7096715608095933974-6">&nbsp;</div><div class="crayon-line" id="crayon-59f7096715608095933974-7"><span class="crayon-c">/* eslint-disable no-new */</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7096715608095933974-8"><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Vue</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7096715608095933974-9"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">el</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'#app'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7096715608095933974-10"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">router</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7096715608095933974-11"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">template</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'&lt;App/&gt;'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7096715608095933974-12"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">components</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">App</span><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f7096715608095933974-13"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0019 seconds] -->
<p>通过代码可以看出这里引进了App的组件和&lt;App/&gt;的模板，它是通过 import App from &#8216;./App&#8217;这句代码引入的。  我们找到App.vue文件，打开查看。</p>
<h4>三、App.vue文件:</h4>
<p></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f709671560d864679619" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;template&gt;
  &lt;div id="app"&gt;
    &lt;img src="style/images/logo.png"&gt;
    &lt;router-view&gt;&lt;/router-view&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  name: 'app'
}
&lt;/script&gt;

&lt;style&gt;
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
&lt;/style&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f709671560d864679619-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671560d864679619-2">2</div><div class="crayon-num" data-line="crayon-59f709671560d864679619-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671560d864679619-4">4</div><div class="crayon-num" data-line="crayon-59f709671560d864679619-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671560d864679619-6">6</div><div class="crayon-num" data-line="crayon-59f709671560d864679619-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671560d864679619-8">8</div><div class="crayon-num" data-line="crayon-59f709671560d864679619-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671560d864679619-10">10</div><div class="crayon-num" data-line="crayon-59f709671560d864679619-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671560d864679619-12">12</div><div class="crayon-num" data-line="crayon-59f709671560d864679619-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671560d864679619-14">14</div><div class="crayon-num" data-line="crayon-59f709671560d864679619-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671560d864679619-16">16</div><div class="crayon-num" data-line="crayon-59f709671560d864679619-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671560d864679619-18">18</div><div class="crayon-num" data-line="crayon-59f709671560d864679619-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671560d864679619-20">20</div><div class="crayon-num" data-line="crayon-59f709671560d864679619-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671560d864679619-22">22</div><div class="crayon-num" data-line="crayon-59f709671560d864679619-23">23</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f709671560d864679619-1"><span class="crayon-r ">&lt;template&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671560d864679619-2"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"app"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f709671560d864679619-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s ">"style/images/logo.png"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671560d864679619-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;router-view&gt;</span><span class="crayon-r ">&lt;/router-view&gt;</span></div><div class="crayon-line" id="crayon-59f709671560d864679619-5"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671560d864679619-6"><span class="crayon-r ">&lt;/template&gt;</span></div><div class="crayon-line" id="crayon-59f709671560d864679619-7">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f709671560d864679619-8"><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line" id="crayon-59f709671560d864679619-9"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-st">default</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671560d864679619-10"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'app'</span></div><div class="crayon-line" id="crayon-59f709671560d864679619-11"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671560d864679619-12"><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line" id="crayon-59f709671560d864679619-13">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f709671560d864679619-14"><span class="crayon-ta">&lt;style&gt;</span></div><div class="crayon-line" id="crayon-59f709671560d864679619-15"><span class="crayon-k ">#app </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671560d864679619-16"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'Avenir'</span><span class="crayon-i ">,</span><span class="crayon-h"> </span><span class="crayon-i ">Helvetica,</span><span class="crayon-h"> </span><span class="crayon-i ">Arial,</span><span class="crayon-h"> </span><span class="crayon-i ">sans-serif</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f709671560d864679619-17"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">-webkit-font-smoothing</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">antialiased</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671560d864679619-18"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">-moz-osx-font-smoothing</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">grayscale</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f709671560d864679619-19"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">text-align</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">center</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671560d864679619-20"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">color</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#2c3e50</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f709671560d864679619-21"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">margin-top</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">60px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671560d864679619-22"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f709671560d864679619-23"><span class="crayon-ta">&lt;/style&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0039 seconds] -->
<p>app.vue文件我们可以分成三部分解读，</p>
<ul>
<li>&lt;template&gt;&lt;/template&gt;标签包裹的内容：这是模板的HTMLDom结构，里边引入了一张图片和&lt;router-view&gt;&lt;/router-view&gt;标签，&lt;router-view&gt;标签说明使用了路由机制。我们会在以后专门拿出一篇文章讲Vue-router。</li>
<li>&lt;script&gt;&lt;/script&gt;标签包括的js内容：你可以在这里些一些页面的动态效果和Vue的逻辑代码。</li>
<li>&lt;style&gt;&lt;/style&gt;标签包裹的css内容：这里就是你平时写的CSS样式，对页面样子进行装饰用的，需要特别说明的是你可以用&lt;style scoped&gt;&lt;/style&gt;来声明这些css样式只在本模板中起作用。</li>
</ul>
<h3>四、router/index.js 路由文件</h3>
<p>引文在app.vue中我们看到了路由文件，虽然router的内容比较多，但是我们先简单的看一下。下篇文章我们就开始讲Vue-router。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7096715614623169281" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7096715614623169281-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7096715614623169281-2">2</div><div class="crayon-num" data-line="crayon-59f7096715614623169281-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7096715614623169281-4">4</div><div class="crayon-num" data-line="crayon-59f7096715614623169281-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7096715614623169281-6">6</div><div class="crayon-num" data-line="crayon-59f7096715614623169281-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7096715614623169281-8">8</div><div class="crayon-num" data-line="crayon-59f7096715614623169281-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7096715614623169281-10">10</div><div class="crayon-num" data-line="crayon-59f7096715614623169281-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7096715614623169281-12">12</div><div class="crayon-num" data-line="crayon-59f7096715614623169281-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7096715614623169281-14">14</div><div class="crayon-num" data-line="crayon-59f7096715614623169281-15">15</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7096715614623169281-1"><span class="crayon-e">import </span><span class="crayon-e">Vue </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'vue'</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7096715614623169281-2"><span class="crayon-e">import </span><span class="crayon-e">Router </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'vue-router'</span></div><div class="crayon-line" id="crayon-59f7096715614623169281-3"><span class="crayon-e">import </span><span class="crayon-e">Hello </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'@/components/Hello'</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7096715614623169281-4">&nbsp;</div><div class="crayon-line" id="crayon-59f7096715614623169281-5"><span class="crayon-v">Vue</span><span class="crayon-sy">.</span><span class="crayon-st">use</span><span class="crayon-sy">(</span><span class="crayon-v">Router</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7096715614623169281-6">&nbsp;</div><div class="crayon-line" id="crayon-59f7096715614623169281-7"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-st">default</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Router</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7096715614623169281-8"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">routes</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-59f7096715614623169281-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7096715614623169281-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'/'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7096715614623169281-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'Hello'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7096715614623169281-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-i">Hello</span></div><div class="crayon-line" id="crayon-59f7096715614623169281-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7096715614623169281-14"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-59f7096715614623169281-15"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0019 seconds] -->
<p>我们可以看到 import Hello from &#8216;@/components/Hello&#8217;这句话， 文件引入了/components/Hello.vue文件。这个文件里就配置了一个路由，就是当我们访问网站时给我们显示Hello.vue的内容。</p>
<p>五、Hello.vue文件解读：</p>
<p>这个文件就是我们在第一节课看到的页面文件了。也是分为&lt;template&gt;&lt;script&gt;&lt;style&gt;三个部分，以后我们大部分的工作都是写这些.vue结尾的文件。现在我们可以试着改一些内容，然后预览一下。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f709671561a999897644" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;template&gt;
  &lt;div class="hello"&gt;
    &lt;h1&gt;{{ msg }}&lt;/h1&gt;
    &lt;h2&gt;Essential Links&lt;/h2&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="https://vuejs.org" target="_blank"&gt;Core Docs&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="https://forum.vuejs.org" target="_blank"&gt;Forum&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="https://gitter.im/vuejs/vue" target="_blank"&gt;Gitter Chat&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="https://twitter.com/vuejs" target="_blank"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
      &lt;br&gt;
      &lt;li&gt;&lt;a href="http://vuejs-templates.github.io/webpack/" target="_blank"&gt;Docs for This Template&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;h2&gt;Ecosystem&lt;/h2&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="http://router.vuejs.org/" target="_blank"&gt;vue-router&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://vuex.vuejs.org/" target="_blank"&gt;vuex&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://vue-loader.vuejs.org/" target="_blank"&gt;vue-loader&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="https://github.com/vuejs/awesome-vue" target="_blank"&gt;awesome-vue&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
&lt;/script&gt;

&lt;!-- Add "scoped" attribute to limit CSS to this component only --&gt;
&lt;style scoped&gt;
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
&lt;/style&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f709671561a999897644-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-2">2</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-4">4</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-6">6</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-8">8</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-10">10</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-12">12</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-14">14</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-16">16</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-18">18</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-20">20</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-22">22</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-24">24</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-26">26</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-28">28</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-30">30</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-32">32</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-33">33</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-34">34</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-35">35</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-36">36</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-37">37</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-38">38</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-39">39</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-40">40</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-41">41</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-42">42</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-43">43</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-44">44</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-45">45</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-46">46</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-47">47</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-48">48</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-49">49</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-50">50</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-51">51</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f709671561a999897644-52">52</div><div class="crayon-num" data-line="crayon-59f709671561a999897644-53">53</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f709671561a999897644-1"><span class="crayon-r ">&lt;template&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-2"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"hello"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;h1&gt;</span><span class="crayon-i ">{{ msg }}</span><span class="crayon-r ">&lt;/h1&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;h2&gt;</span><span class="crayon-i ">Essential Links</span><span class="crayon-r ">&lt;/h2&gt;</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;ul&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">"https://vuejs.org"</span><span class="crayon-h"> </span><span class="crayon-e ">target</span><span class="crayon-o">=</span><span class="crayon-s ">"_blank"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">Core Docs</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">"https://forum.vuejs.org"</span><span class="crayon-h"> </span><span class="crayon-e ">target</span><span class="crayon-o">=</span><span class="crayon-s ">"_blank"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">Forum</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">"https://gitter.im/vuejs/vue"</span><span class="crayon-h"> </span><span class="crayon-e ">target</span><span class="crayon-o">=</span><span class="crayon-s ">"_blank"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">Gitter Chat</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-9"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">"https://twitter.com/vuejs"</span><span class="crayon-h"> </span><span class="crayon-e ">target</span><span class="crayon-o">=</span><span class="crayon-s ">"_blank"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">Twitter</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-10"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;br&gt;</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-11"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">"http://vuejs-templates.github.io/webpack/"</span><span class="crayon-h"> </span><span class="crayon-e ">target</span><span class="crayon-o">=</span><span class="crayon-s ">"_blank"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">Docs for This Template</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-12"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/ul&gt;</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-13"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;h2&gt;</span><span class="crayon-i ">Ecosystem</span><span class="crayon-r ">&lt;/h2&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-14"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;ul&gt;</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-15"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">"http://router.vuejs.org/"</span><span class="crayon-h"> </span><span class="crayon-e ">target</span><span class="crayon-o">=</span><span class="crayon-s ">"_blank"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">vue-router</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-16"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">"http://vuex.vuejs.org/"</span><span class="crayon-h"> </span><span class="crayon-e ">target</span><span class="crayon-o">=</span><span class="crayon-s ">"_blank"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">vuex</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-17"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">"http://vue-loader.vuejs.org/"</span><span class="crayon-h"> </span><span class="crayon-e ">target</span><span class="crayon-o">=</span><span class="crayon-s ">"_blank"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">vue-loader</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-18"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">"https://github.com/vuejs/awesome-vue"</span><span class="crayon-h"> </span><span class="crayon-e ">target</span><span class="crayon-o">=</span><span class="crayon-s ">"_blank"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">awesome-vue</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-19"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/ul&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-20"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-21"><span class="crayon-r ">&lt;/template&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-22">&nbsp;</div><div class="crayon-line" id="crayon-59f709671561a999897644-23"><span class="crayon-i "><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-24"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-st">default</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-25"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'hello'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-26"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">data</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-27"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-28"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">msg</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'Welcome to Your Vue.js App'</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-29"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-30"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-31"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-32"><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-59f709671561a999897644-33">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-34"><span class="crayon-c">&lt;!-- Add "scoped" attribute to limit CSS to this component only --&gt;</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-35"><span class="crayon-ta">&lt;style </span><span class="crayon-k ">scoped&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-36"><span class="crayon-k ">h1, h2 </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-37"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">font-weight</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">normal</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-38"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-39">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-40"><span class="crayon-k ">ul </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-41"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">list-style-type</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">none</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-42"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">padding</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-43"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-44">&nbsp;</div><div class="crayon-line" id="crayon-59f709671561a999897644-45"><span class="crayon-k ">li </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-46"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">display</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">inline-block</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-47"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">margin</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">0</span><span class="crayon-h"> </span><span class="crayon-i ">10px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-48"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-49">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-50"><span class="crayon-k ">a </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-51"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">color</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#42b983</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f709671561a999897644-52"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f709671561a999897644-53"><span class="crayon-ta">&lt;/style&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0063 seconds] -->
<p></p>
<h3>总结：</h3>
<p>这个教程只是带着你大概浏览和重点讲解了vue-cli的知识，如果你想完全弄明白vue-cli，我建议最好是有调理的阅读所有代码，这对你以后成为vue实际项目 的开发很有帮助。如果你是一个初学者，了解这些已经足够向下学习了。这篇教程结束后，我们会学习vue-router的知识，vue-router是一个重点学习任务，我会竭尽所能把路由的知识都讲透。很高兴大家能和我一起学习，我们下篇教程见了。</p>
<p>&nbsp;</p>
        <div class="gave" >
            <a href="javascript:;" id="gave">打赏</a>
            <div class="code" id="wechatCode" style="display: none">
                <img src="style/images/20170518151055111.png" alt="微信扫一扫支付">
                <div><img src="style/images/ico-wechat.jpg" alt="微信logo" class="ico-wechat">微信扫一扫，打赏作者吧～</i></div>
            </div>
        </div>        </div> <!-- //.entry-content -->
               <br>
        <div class="entry-tags text-left">标签：<a href="http://jspang.com/tag/vue/" rel="tag">Vue</a></div>
    </div>

</article><!-- #post-## -->                              
				<div class="user-profile media">
    <div class="pull-left author-avater">
        <img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-110.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=220&amp;d=mm&amp;r=g 2x' class='avatar avatar-110 photo' height='110' width='110' />    </div>
    <div class="media-body">
        <div class="profile-heading">
            <h3><a href="http://jspang.com/author/jspang001/" title="由技术胖发布" rel="author">技术胖</a></h3>
        </div>
        <div class="website-link">http://jspang.com</div>
        <div class="author-description">
                    </div>
    </div>
</div><!-- .user-profile -->                               
				
	<nav class="navigation post-navigation" role="navigation">
		<h2 class="screen-reader-text">文章导航</h2>
		<div class="nav-links"><div class="nav-previous"><a href="http://jspang.com/2017/04/09/vue2_4/" rel="prev"><i class="fa fa-angle-left"></i> Previous Post</a></div><div class="nav-next"><a href="http://jspang.com/2017/04/13/vue-router/" rel="next">Next Post <i class="fa fa-angle-right"></i></a></div></div>
	</nav>
									<div class="comment-box">
						<div id="comments" class="comments-area comments">
            <h3 class="common-title comments-title">
            22 Comments        </h3>

        <ul class="comment-list">

            			<li class="comment even thread-even depth-1" id="li-comment-115">
				<div id="comment-115" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/76d48f5216fea7231294f6f638e00e17-75.jpg' srcset='http://1.gravatar.com/avatar/76d48f5216fea7231294f6f638e00e17?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">王耀辉</h3>							<span class="comment-date">2017年5月6日</span>
						</div>

						
						<div class="comment-content">
							<p>之前也是想过要怎么部署到服务器很苦恼！！再次感谢胖哥！！</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=115#respond' onclick='return addComment.moveForm( "comment-115", "115", "respond", "1411" )' aria-label='回复给王耀辉'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-116">
				<div id="comment-116" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年5月6日</span>
						</div>

						
						<div class="comment-content">
							<p>可以，一起学习，能帮到你我也很高兴。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=116#respond' onclick='return addComment.moveForm( "comment-116", "116", "respond", "1411" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even depth-2" id="li-comment-499">
				<div id="comment-499" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/619c65f4677b378384289b36e2baf111-75.jpg' srcset='http://0.gravatar.com/avatar/619c65f4677b378384289b36e2baf111?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">王耀宗</h3>							<span class="comment-date">2017年8月30日</span>
						</div>

						
						<div class="comment-content">
							<p>怎么部署到服务器</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=499#respond' onclick='return addComment.moveForm( "comment-499", "499", "respond", "1411" )' aria-label='回复给王耀宗'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-3" id="li-comment-500">
				<div id="comment-500" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年8月31日</span>
						</div>

						
						<div class="comment-content">
							<p>请继续往下看。我在其他视频中有讲的。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=500#respond' onclick='return addComment.moveForm( "comment-500", "500", "respond", "1411" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-153">
				<div id="comment-153" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/4965452e23c584c3f18ada59a6668544-75.jpg' srcset='http://1.gravatar.com/avatar/4965452e23c584c3f18ada59a6668544?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">martin</h3>							<span class="comment-date">2017年5月23日</span>
						</div>

						
						<div class="comment-content">
							<p>vue init webpack vuecliTest</p>
<p>   vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 66.249.89.104:443</p>
<p>你好，为什么下载失败了。我翻墙了，还是全局模式，访问网页github是正常的，但是这里为什么失败了</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=153#respond' onclick='return addComment.moveForm( "comment-153", "153", "respond", "1411" )' aria-label='回复给martin'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-154">
				<div id="comment-154" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年5月23日</span>
						</div>

						
						<div class="comment-content">
							<p>多试试，网络不稳定的原因，下载模板时失败了。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=154#respond' onclick='return addComment.moveForm( "comment-154", "154", "respond", "1411" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-192">
				<div id="comment-192" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/c58c22cf3ff6e5203c5654f63ed4d8a8-75.jpg' srcset='http://0.gravatar.com/avatar/c58c22cf3ff6e5203c5654f63ed4d8a8?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">wjj5728</h3>							<span class="comment-date">2017年6月15日</span>
						</div>

						
						<div class="comment-content">
							<p>一直想手动搭一个模板，但是知识点好多，搭不下去，技术胖可以出个视频，讲怎么搭建一套类似vue-cli的教程 ，嘿嘿</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=192#respond' onclick='return addComment.moveForm( "comment-192", "192", "respond", "1411" )' aria-label='回复给wjj5728'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-196">
				<div id="comment-196" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/372aef51d4e3574dd99ca2805b4b2197-75.jpg' srcset='http://0.gravatar.com/avatar/372aef51d4e3574dd99ca2805b4b2197?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">小工匠</h3>							<span class="comment-date">2017年6月18日</span>
						</div>

						
						<div class="comment-content">
							<p>vue-cli · Failed to download repo vuejs-templates/webpack:unable to  verify the first certificate   胖哥您好  ：您讲的 真好真细，按照您胡视频一步一步安装的  安装到vue init webpack vuecliTest  报这个错啥意思    创建不了项目，怎么办？</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=196#respond' onclick='return addComment.moveForm( "comment-196", "196", "respond", "1411" )' aria-label='回复给小工匠'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-201">
				<div id="comment-201" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年6月19日</span>
						</div>

						
						<div class="comment-content">
							<p>注意版本，网络稳定性和管理员权限。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=201#respond' onclick='return addComment.moveForm( "comment-201", "201", "respond", "1411" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-304">
				<div id="comment-304" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/c4cb1a49ac33de7d95500947cf111e09-75.jpg' srcset='http://0.gravatar.com/avatar/c4cb1a49ac33de7d95500947cf111e09?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">zhengjiaqi</h3>							<span class="comment-date">2017年7月20日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥：<br />
您好，我按照您的视频，到这一步时：sudo vue init webpack vue-cli-test，报错了： vue-cli · Failed to download repo vuejs-templates/webpack: tunneling socket could not be established, cause=read ECONNRESET，请问这是什么原因造成的？该如何解决呢？</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=304#respond' onclick='return addComment.moveForm( "comment-304", "304", "respond", "1411" )' aria-label='回复给zhengjiaqi'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-307">
				<div id="comment-307" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年7月22日</span>
						</div>

						
						<div class="comment-content">
							<p>网络问题，多下载几次就可以了。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=307#respond' onclick='return addComment.moveForm( "comment-307", "307", "respond", "1411" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-337">
				<div id="comment-337" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/ebea373808537640494ff5cb8a8d6024-75.jpg' srcset='http://2.gravatar.com/avatar/ebea373808537640494ff5cb8a8d6024?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">lzi3cn</h3>							<span class="comment-date">2017年8月3日</span>
						</div>

						
						<div class="comment-content">
							<p>可以使用淘宝镜像，会快很多</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=337#respond' onclick='return addComment.moveForm( "comment-337", "337", "respond", "1411" )' aria-label='回复给lzi3cn'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-355">
				<div id="comment-355" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/fb504752b8ee5035f7dcaad13d47f8b4-75.jpg' srcset='http://0.gravatar.com/avatar/fb504752b8ee5035f7dcaad13d47f8b4?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">荣石</h3>							<span class="comment-date">2017年8月6日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥，很棒</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=355#respond' onclick='return addComment.moveForm( "comment-355", "355", "respond", "1411" )' aria-label='回复给荣石'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-470">
				<div id="comment-470" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/c6d38da82d5c0087e71e5d42eaf50716-75.jpg' srcset='http://0.gravatar.com/avatar/c6d38da82d5c0087e71e5d42eaf50716?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">纸飞机</h3>							<span class="comment-date">2017年8月24日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥&#8230;视频不能全屏啊.很难受.我都看源代码找视频原地址去了</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=470#respond' onclick='return addComment.moveForm( "comment-470", "470", "respond", "1411" )' aria-label='回复给纸飞机'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-474">
				<div id="comment-474" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年8月24日</span>
						</div>

						
						<div class="comment-content">
							<p>看网站右侧有个方法可以下载高清版观看，不过要打赏5元钱。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=474#respond' onclick='return addComment.moveForm( "comment-474", "474", "respond", "1411" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-478">
				<div id="comment-478" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/d8024d4920b7d8af3ef7a1b61e69c1b7-75.jpg' srcset='http://1.gravatar.com/avatar/d8024d4920b7d8af3ef7a1b61e69c1b7?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">facebook</h3>							<span class="comment-date">2017年8月24日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥 vscode出现“扩展主机意外终止。请重新加载窗口以恢复。”这个情况怎么搞？我卸载重装了也不管用</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=478#respond' onclick='return addComment.moveForm( "comment-478", "478", "respond", "1411" )' aria-label='回复给facebook'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-479">
				<div id="comment-479" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年8月25日</span>
						</div>

						
						<div class="comment-content">
							<p>这个情况我暂时还没有遇到过，但是如果你重装不可用，那也可以试试重装系统。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=479#respond' onclick='return addComment.moveForm( "comment-479", "479", "respond", "1411" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-502">
				<div id="comment-502" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/5dd761aa40cb0e9346523b09499fb187-75.jpg' srcset='http://2.gravatar.com/avatar/5dd761aa40cb0e9346523b09499fb187?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">lee</h3>							<span class="comment-date">2017年8月31日</span>
						</div>

						
						<div class="comment-content">
							<p>想问那联调阶段怎么和后台连接呢，之前普通的项目使用xmapp做的代理服务，现在这个vue-cli创建的项目前端怎么和后端进行联调呢？??</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=502#respond' onclick='return addComment.moveForm( "comment-502", "502", "respond", "1411" )' aria-label='回复给lee'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-543">
				<div id="comment-543" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/e546877f9ed465baf946d0dcec806a20-75.jpg' srcset='http://2.gravatar.com/avatar/e546877f9ed465baf946d0dcec806a20?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">gll</h3>							<span class="comment-date">2017年9月11日</span>
						</div>

						
						<div class="comment-content">
							<p>非常喜欢技术胖的视频和学习教程，比买的书好多了，很详细，写的和讲的都很棒，非常感谢！！</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=543#respond' onclick='return addComment.moveForm( "comment-543", "543", "respond", "1411" )' aria-label='回复给gll'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-708">
				<div id="comment-708" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/98fa7b70157269ee8930b89a03a28e2e-75.jpg' srcset='http://0.gravatar.com/avatar/98fa7b70157269ee8930b89a03a28e2e?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">lcc</h3>							<span class="comment-date">2017年10月10日</span>
						</div>

						
						<div class="comment-content">
							<p>总结：(第二行) &#8212;-有条理</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=708#respond' onclick='return addComment.moveForm( "comment-708", "708", "respond", "1411" )' aria-label='回复给lcc'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-722">
				<div id="comment-722" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/e165d83bd37e258537cd4dbfc587716c-75.jpg' srcset='http://2.gravatar.com/avatar/e165d83bd37e258537cd4dbfc587716c?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">lYao</h3>							<span class="comment-date">2017年10月14日</span>
						</div>

						
						<div class="comment-content">
							<p>App.vue文件是怎么加载 hello.vue文件的<br />
App.vue文件里面只有 并没有呀</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=722#respond' onclick='return addComment.moveForm( "comment-722", "722", "respond", "1411" )' aria-label='回复给lYao'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-786">
				<div id="comment-786" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/349e3851d8db9a18214e590a64471a14-75.jpg' srcset='http://0.gravatar.com/avatar/349e3851d8db9a18214e590a64471a14?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">DaiSX</h3>							<span class="comment-date">2017年10月30日</span>
						</div>

						
						<div class="comment-content">
							<p>讲得很好 ， 感觉学到了很多！</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/10/vue-cli/?replytocom=786#respond' onclick='return addComment.moveForm( "comment-786", "786", "respond", "1411" )' aria-label='回复给DaiSX'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
        </ul><!-- .comment-list -->

        
        
    
    	<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">发表评论 <small><a rel="nofollow" id="cancel-comment-reply-link" href="/2017/04/10/vue-cli/#respond" style="display:none;">取消回复</a></small></h3>			<form action="http://jspang.com/wp-comments-post.php" method="post" id="commentform" class="comment-form row">
				<div class="clearfix"></div><div class="col-md-12"><textarea id="comment" placeholder="Write your comment..." name="comment" aria-required="true"></textarea></div><div class="col-md-4"><input id="author" name="author" type="text" placeholder="Name *" value="" size="30" aria-required='true'/></div>
<div class="col-md-4"><input id="email" name="email" type="text" placeholder="Email *" value="" size="30" aria-required='true'/></div>
<div class="col-md-4"><input id="url" name="url" type="text" placeholder="Website" value="" size="30"/></div>
<p class="aiowps-captcha"><label for="aiowps-captcha-answer">请输入数字答案:</label><div class="aiowps-captcha-equation"><strong>16 &#8722; 15 = <input type="hidden" name="aiowps-captcha-string-info" id="aiowps-captcha-string-info" value="4k2w84z8xt" /><input type="hidden" name="aiowps-captcha-temp-string" id="aiowps-captcha-temp-string" value="1509362023" /><input type="text" size="2" id="aiowps-captcha-answer" name="aiowps-captcha-answer" value="" autocomplete="off" /></strong></div></p><p class="form-submit col-md-12"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='1411' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="3dc1bc7dee" /></p><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="94"/></p>			</form>
			</div><!-- #respond -->
	</div>					</div>
				
			
					</div>

		<div class="col-md-4">
    <div class="primary-sidebar widget-area" role="complementary">
        <aside id="aster_about_base_widget-2" class="widget widget_aster_about_base_widget"><h1 class="widget-title text-uppercase">博主介绍</h1>			
			<div class="about-widget">
			
						
						<div class="about-me-content">技术胖：10年一线互联网程序开发经验（仍在一线奋战），做过J2EE、PHP和前端，现在主要关注前端领域。每年帮助50万以上前端爱好者学习。 除一线程序员外，博主还有以下身份，但只在装逼时使用。 掘金专栏作者，GitChat特邀讲师，纯金UED金牌讲师，CSDN学院知名讲师，百度传课前端讲师。</div>
				
			
			</div>
			
		</aside><aside id="search-2" class="widget widget_search"><form role="search" method="get" id="search-form" action="http://jspang.com/">
    <div class="aster-search-form">
		<input type="text" placeholder="Search and hit enter&hellip;" value="" name="s" id="s" />
	 </div>
</form></aside><aside id="text-2" class="widget widget_text"><h1 class="widget-title text-uppercase">公告</h1>			<div class="textwidget"><div></div>
<div style="color: #f44336; font-weight: blod;">广告事宜请联系：QQ：454275609</p>
<hr />
<p><strong>QQ群1：364140450(满)</strong></p>
</div>
<div style="color: #f44336; font-weight: blod;"><strong>QQ群2：524520566（600人）</strong></div>
<div style="color: #f44336; font-weight: blod;">进群和2000多名前端关注者一起进步，<br />
我每周都会上线解答群内问题。</div>
<hr />
<ul>
<li>《webpack3.x 成神之路》更新完成。</li>
<li>开始更新《React全家桶》教程，每周三节，请小伙伴关注。</li>
<li>在看视频课程中，如果有疑问，可以发邮件给技术胖。邮件地址：web0432@126.com ,技术胖会在下班后给你回复邮件，解决你的问题。</li>
</ul>
</div>
		</aside><aside id="text-6" class="widget widget_text"><h1 class="widget-title text-uppercase">如果文章对您有帮助，请打赏：</h1>			<div class="textwidget"><p>						<style>
				
					#tab_container_1817 {
				overflow:hidden;
				display:block;
				width:100%;
				border:0px solid #ddd;
				margin-bottom:30px;
				}

#tab_container_1817 .tab-content{
		padding:20px;
		border: 1px solid #e6e6e6 !important;
		margin-top: 0px;
		background-color:#ffffff !important;
		color: #000000 !important;
		font-size:16px !important;
		font-family: Open Sans !important;
		
				border: 1px solid #e6e6e6 !important;
		}
#tab_container_1817 .wpsm_nav-tabs {
    border-bottom: 0px solid #ddd;
}
#tab_container_1817 .wpsm_nav-tabs > li.active > a, #tab_container_1817 .wpsm_nav-tabs > li.active > a:hover, #tab_container_1817 .wpsm_nav-tabs > li.active > a:focus {
	color: #000000 !important;
	cursor: default;
	background-color: #ffffff !important;
	border: 1px solid #e6e6e6 !important;
}

#tab_container_1817 .wpsm_nav-tabs > li > a {
    margin-right: 0px !important; 
    line-height: 1.42857143 !important;
    border: 1px solid #d50000 !important;
    border-radius: 0px 0px 0 0 !important; 
	background-color: #e80606 !important;
	color: #000000 !important;
	padding: 15px 18px 15px 18px !important;
	text-decoration: none !important;
	font-size: 14px !important;
	text-align:center !important;
	font-family: Open Sans !important;
}
#tab_container_1817 .wpsm_nav-tabs > li > a:focus {
outline: 0px !important;
}

#tab_container_1817 .wpsm_nav-tabs > li > a:before {
	display:none !important;
}
#tab_container_1817 .wpsm_nav-tabs > li > a:after {
	display:none !important ;
}
#tab_container_1817 .wpsm_nav-tabs > li{
padding:0px !important ;
margin:0px;
}

#tab_container_1817 .wpsm_nav-tabs > li > a:hover , #tab_container_1817 .wpsm_nav-tabs > li > a:focus {
    color: #000000 !important;
    background-color: #e80606 !important;
	border: 1px solid #d50000 !important;
	
}
#tab_container_1817 .wpsm_nav-tabs > li > a .fa{

margin-right:5px !important;

margin-left:5px !important;


}

		#tab_container_1817 .wpsm_nav-tabs a{
			background-image: url(style/images/img/style-noise.png);
			background-position: 0 0;
			background-repeat: repeat-x;
			}
			


#tab_container_1817 .wpsm_nav-tabs > li {
    float: left;
    margin-bottom: -1px !important;
	margin-right:0px !important; 
}


#tab_container_1817 .tab-content{
overflow:hidden !important;
}


@media (min-width: 769px) {

	#tab_container_1817 .wpsm_nav-tabs > li{
	float:left !important ;
		margin-right:-1px !important;
			}
	#tab_container_1817 .wpsm_nav-tabs{
	float:none !important;
	margin:0px !important;
	}

	/* Margin CSS FOR Horizontal */
	#tab_container_1817 .wpsm_nav-tabs > li {
				
	}
	#tab_container_1817 .wpsm_nav{
			}

}



@media (max-width: 768px) {
	#tab_container_1817 .wpsm_nav-tabs > li {
				
	}
	#tab_container_1817 .wpsm_nav{
			}
}


.wpsm_nav-tabs li:before{
display:none !important;
}

@media (max-width: 768px) {
		
		.wpsm_nav-tabs{
		margin-left:0px !important;
		margin-right:0px !important; 
		
	}
		#tab_container_1817 .wpsm_nav-tabs > li{
		float:none !important;
	}
		
	
}
				</style>
				<div id="tab_container_1817" >
	 
					<ul class="wpsm_nav wpsm_nav-tabs" role="tablist" id="myTab_1817">
							
							<li role="presentation"  class="active"  >
								<a href="#tabs_desc_1817_1" aria-controls="tabs_desc_1817_1" role="tab" data-toggle="tab">
									
																																		
																						
											<span>赏5元</span>
											
																						
																				
										
									
								</a>
							</li>
							
							<li role="presentation"  >
								<a href="#tabs_desc_1817_2" aria-controls="tabs_desc_1817_2" role="tab" data-toggle="tab">
									
																																		
																						
											<span>赏15元</span>
											
																						
																				
										
									
								</a>
							</li>
							
							<li role="presentation"  >
								<a href="#tabs_desc_1817_3" aria-controls="tabs_desc_1817_3" role="tab" data-toggle="tab">
									
																																		
																						
											<span>赏29元</span>
											
																						
																				
										
									
								</a>
							</li>
											 </ul>

					  <!-- Tab panes -->
					  <div class="tab-content" id="tab-content_1817">
												 <div role="tabpanel" class="tab-pane  in active " id="tabs_desc_1817_1">
								<img src="style/images/weixin05.jpg" width="100%" " class="alignnone size-medium" />						 </div>
												 <div role="tabpanel" class="tab-pane " id="tabs_desc_1817_2">
								<img src="style/images/weixin15.jpg" width="100%" " class="alignnone size-medium" />						 </div>
												 <div role="tabpanel" class="tab-pane " id="tabs_desc_1817_3">
								<img src="style/images/weixin29.jpg" width="100%" " class="alignnone size-medium" />						 </div>
							
					 </div>
					 
				 </div>
 <script>
		jQuery(function () {
			jQuery('#myTab_1817 a:first').tab('show')
		});
		
				jQuery(function(){
			var b="fadeIn";
			var c;
			var a;
			d(jQuery("#myTab_1817 a"),jQuery("#tab-content_1817"));function d(e,f,g){
				e.click(function(i){
					i.preventDefault();
					jQuery(this).tab("show");
					var h=jQuery(this).data("easein");
					if(c){c.removeClass(a);}
					if(h){f.find("div.active").addClass("animated "+h);a=h;}
					else{if(g){f.find("div.active").addClass("animated "+g);a=g;}else{f.find("div.active").addClass("animated "+b);a=b;}}c=f.find("div.active");
				});
			}
		});
			</script>
				
			<br />
<span style="color: red;">打赏后你将获得以下特权：</span></p>
<p>1.加入技术胖前端微信交流群。<br />
2.收听《前端成神软技能》语音分享版。<br />
3.和10年程序老司机（技术胖）成为微信好友。<br />
4.获得本站前端视频离线高清版。</p>
<hr />
<p><span style="color: red;">打赏后获得特权流程：</span><br />
1.扫二维码添加技术胖私人微信。<br />
<img src="style/images/232323121111111111.jpg" width="50%" /></p>
<p>2.添加微信成功后，发送打赏截图。</p>
<p>3.技术胖拉你入群，查看群公告。</p>
</div>
		</aside><aside id="text-8" class="widget widget_text"><h1 class="widget-title text-uppercase">视频教程</h1>			<div class="textwidget"><p>最新视频</p>
<ol>
<li><a href="http://jspang.com/2017/06/03/es6/" rel="bookmark">技术胖带你玩转ES6视频教程</a></li>
</ol>
<p>Vue视频合集-<small>可按此顺序学习</small></p>
<ol>
<li><a href="http://jspang.com/2017/02/23/vue2_01/" rel="bookmark">【第一季】VUE2.0内部指令(共8集)</a></li>
<li><a href="http://jspang.com/2017/03/14/vue2_02/" rel="bookmark">【第二季】VUE2.0全局API(共9集)</a></li>
<li><a href="http://jspang.com/2017/03/26/vue3/" rel="bookmark">【第三季】VUE2.0选项（共6集）</a></li>
<li><a href="http://jspang.com/2017/04/09/vue2_4/" rel="bookmark">【第四季】VUE2.0实例内置组件（共4集）</a></li>
<li><a href="http://jspang.com/2017/04/10/vue-cli/" rel="bookmark">技术胖的VUE-CLI 视频教程</a></li>
<li><a href="http://jspang.com/2017/04/13/vue-router/" rel="bookmark">技术胖的VUE-ROUTER视频教程</a></li>
<li><a href="http://jspang.com/2017/05/03/vuex/" rel="bookmark">技术胖的VUEX视频教程</a></li>
<li><a href="http://jspang.com/2017/05/22/vuedemo/" rel="bookmark">VUE实战视频-快餐店收银系统</a></li>
</ol>
<hr />
<p>CocosCreator视频（前端游戏制作）</p>
<ol>
<li><a href="http://jspang.com/category/learn/jichu/">CC基础视频教程</a></li>
<li><a href="http://jspang.com/category/learn/shizhan/">CC实战-勇闯地下室</a></li>
</ol>
<hr />
<p>其它视频</p>
<ol>
<li><a href="http://jspang.com/2016/11/24/webpack/">Webpack基础视频</a></li>
<li><a href="http://jspang.com/2017/01/11/fabricjsbasic/" rel="bookmark">步入FABRIC.JS 中文视频教程</a></li>
</ol>
</div>
		</aside><aside id="text-5" class="widget widget_text"><h1 class="widget-title text-uppercase">捐赠墙</h1>			<div class="textwidget">
<hr/>
<div>以下人员在服务器购买费用中捐款，所以本站由以下人员共同建立。2017年5月22日重新上线。</div>
<div style="color:#f44336;border-bottom:1px solid #e0e0e0;padding:10px 0px;" >土豪榜</div>
<div>
高丽-59元，
周老六-147元，
风飞沙-118元
</div>
<div  style="color:#f44336;border-bottom:1px solid #e0e0e0;;padding:10px 0px;">真情铁粉</div>
<div>
婷婷-19元，
fillter-29元，
军哥哥-29元，
贪吃鱼儿-29元，
妖妖-29元，
追风-48元，
吴思超-29元，
金秀学-29元，
十月弓虽-29元，
谭兵-29元，
千夜一夕-29元，
jason-29元，
上帝没给答案-19元，
土豆-19元，
Tempest-29元，
馥镬-29，
詹小云-19元，
hasaki-29元，
落_尘-29元，
汪胜强-29元，
ginway-29元，
吕檀溪-29元，
Arical-29元，
lishalom-29元，
桂玉青-19元，
张杨-19元，
Peach-29元，
国豪-19元，
Kevin-29元，
孟凡兴-29元，
谢启鸿-19元，
bwhite-29元，
null-29元，
yuyi_guo-19元，
张易得-29元，
Rewa-Fang-29元，
小钟-29元，
木白-29元，
jackyrong-19元，
咚咚-29元，
笑容-29元，
vanjon-29元，
一曲琴殇-19元，
橙橙同学-29元，
王畅-19元，
咚咚-29元，
野蛮的橘子-29元，
路道老粗-29元，
建豪-29元

</div>
</div>
		</aside>    </div>
</div>

	</div>
</div>

<footer id="footer">
	<div class="copy-right-text text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<p>Copyright &copy; 2017 <a href="http://jspang.com/" rel="home">技术胖-胜洪宇关注web前端技术</a>. All rights reserved.<br>Powered by <a href="http://jspang.com">jspang.com</a>.备案号 <a href="http://icp.chinaz.com/info?q=jspang.com">吉ICP备11005377号-3</a></p>
				</div>
			</div>
		</div>
	</div><!-- /Copyright Text -->
</footer><!-- /#Footer -->


<div class="scroll-up">
    <a href="#"><i class="fa fa-angle-up"></i></a>
</div>
<!-- Scroll Up -->

<link rel='stylesheet' id='wechat-reward-css'  href='style/css/wechat-reward.css' type='text/css' media='all' />
<script type='text/javascript' src='style/js/smartideo.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var tocplus = {"smooth_scroll":"1","visibility_show":"\u663e\u793a","visibility_hide":"\u9690\u85cf","width":"Auto"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/front.min.js'></script>
<script type='text/javascript' src='style/js/bootstrap.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var viewsCacheL10n = {"admin_ajax_url":"http:\/\/jspang.com\/wp-admin\/admin-ajax.php","post_id":"1411"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/postviews-cache.js'></script>
<script type='text/javascript' src='style/js/bootstrap.min.js'></script>
<script type='text/javascript' src='style/js/smoothscroll.js'></script>
<script type='text/javascript' src='style/js/jquery.slicknav.js'></script>
<script type='text/javascript' src='style/js/jquery.fitvids.js'></script>
<script type='text/javascript' src='style/js/imagesloaded.min.js'></script>
<script type='text/javascript' src='style/js/masonry.min.js'></script>
<script type='text/javascript' src='style/js/jquery.masonry.min.js'></script>
<script type='text/javascript' src='style/js/scripts.js'></script>
<script type='text/javascript' src='style/js/comment-reply.min.js'></script>
<script type='text/javascript' src='style/js/wp-embed.min.js'></script>
<script type='text/javascript' src='style/js/wechat-reward.js'></script>
<script type='text/javascript' src='style/js/form.js'></script>
	    <script type="type/html" id="xhshop_payment_gateways_jspai_html">
    	    <div id="xhshop-pay-callback-payment-gateway">
    		<div class="xunhupay open"  onclick="window.XHSHOP.payment_gateway.hide();"></div>
        		<ul class="xunhupay-list" id="xunhupay-list" style="display: none;">
            		<li class="xunhupay-loading" style="border-top:0;display:none;"></li>
            		<li onclick="window.XHSHOP.payment_gateway.submit('xh-payment-gateway-alipay-payment');"  class="xunhupay-btn channel-ali"><i style="width:50px;height:40px;background: url(style/images/img/icon.png) center no-repeat;"></i><span>点击付款</span></li><li onclick="window.XHSHOP.payment_gateway.submit('xh-payment-gateway-wechat-payment');" style="border-bottom:0" class="xunhupay-btn channel-ali"><i style="width:50px;height:40px;background: url(style/images/img/icon01.png) center no-repeat;"></i><span>点击付款</span></li>            		<li class="xunhupay-close" onclick="window.XHSHOP.payment_gateway.hide();"></li>
        		</ul>
    		</div>
		</script>
				<script type="text/javascript">
		(function($){
			if(!window.XHSHOP){window.XHSHOP={};}
			window.XHSHOP.url_ajax ='http://jspang.com/wp-admin/admin-ajax.php';
			window.XHSHOP.alert=function(msg){alert(msg);};
			window.XHSHOP.beforeSend=function(){$('.xunhupay-loading').css('display','block');};
			window.XHSHOP.complete=function(){};
			window.XHSHOP.error=function(e){window.XHSHOP.alert("系统异常，请稍候重试！");};
			window.XHSHOP.finish=function(){$('.xunhupay-loading').css('display','none');};
			window.XHSHOP.unauth =function(callback){(function(){location.href="/wp-login.php?redirect_to="+encodeURIComponent(location.href.toString());})();};
	
			window.XHSHOP.pay=function(data){
							    window.XHSHOP.payment_gateway.show(data);
			    			};
			
			window.XHSHOP.payment_gateway={
					__data:null,
					__beforeSends:[window.XHSHOP.beforeSend],
					__completes:[window.XHSHOP.complete],
					__finishs:[window.XHSHOP.finish],
					show:function(data){
						window.XHSHOP.payment_gateway.__data=data;
						window.XHSHOP.payment_gateways_templete=$('#xhshop_payment_gateways_jspai_html').html();
						
												
						window.XHSHOP.payment_gateway.hide();
				 		$('body').append(window.XHSHOP.payment_gateways_templete);
				 		$('#xunhupay-list').fadeIn();
				 		window.XHSHOP.payment_gateway.__resize();
				 		
				 							},
					__resize : function(){
			 			if(document.documentElement.clientWidth<=450){
			 				return;
			 			}
						var d = document.getElementById('xunhupay-list');
						if(d==null){return;}
						d.style.top = ((document.documentElement.clientHeight - d.offsetHeight) / 2) + "px";
						d.style.left = ((document.documentElement.clientWidth - d.offsetWidth) / 2) + "px";
			 		},
					hide:function(){
												var $gateway =$('#xhshop-pay-callback-payment-gateway');
						if($gateway.length>0){
							$gateway.remove();
						}
											},
					submit:function(payment_gateway_id){
						var data =window.XHSHOP.payment_gateway.__data;
						if(!data){data={};}
						data.action='XHSHOP_SHIPPINGS_SIMPLE_PAY';
						data.callback='?';
						data.call_url=encodeURIComponent(location.href.toString());
						data.payment_gateway=payment_gateway_id;
						$.ajax({
							url:window.XHSHOP.url_ajax,
							type:'post',
							timeout:60*1000,
							async:true,
							cache:false,
							data:data,
							traditional:false,
							dataType: "jsonp",
							jsonp: "callback", 
							beforeSend:function(){
								for(var i=0;i<window.XHSHOP.payment_gateway.__beforeSends.length;i++){
									window.XHSHOP.payment_gateway.__beforeSends[i]();
								}
							},
							complete:function(){
								for(var i=0;i<window.XHSHOP.payment_gateway.__completes.length;i++){
									window.XHSHOP.payment_gateway.__completes[i]();
								}
							},
							success:function(call){
								for(var i=0;i<window.XHSHOP.payment_gateway.__finishs.length;i++){
									window.XHSHOP.payment_gateway.__finishs[i]();
								}
								if(!call){
									return;
								}
								
								if(call.errcode!=0){
									if(call.errcode==501){
										window.XHSHOP.unauth();
										return;
									}
									
																		window.XHSHOP.payment_gateway.hide();
									window.XHSHOP.alert('errcode:'+call.errcode+';errmsg:'+call.errmsg);
									return;
								}
								
																$('body').append('<div style="display:none;">'+call.errmsg+'</div>');
							},
							error:function(e){
								for(var i=0;i<window.XHSHOP.payment_gateway.__finishs.length;i++){
									window.XHSHOP.payment_gateway.__finishs[i]();
								}
								console.warn(e.responseText);
								window.XHSHOP.error(e);
								window.XHSHOP.payment_gateway.hide();
							}
						});
					}
    			};
    		})(jQuery);
		</script>
	    
</body>
</html>

<!-- Dynamic page generated in 1.419 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2017-10-30 19:13:43 -->

<!-- Compression = gzip -->